<template>
  <div>
    <h3>{{dict_usage[usageId]}}单次录入</h3>
    <div class="container">
      <div class="header">
        <el-row type="flex">
          <el-col :span="6"></el-col>
          <el-col :span="10">
            <el-form ref="form" :model="form" label-width="110px" :rules="rules" inline-message>
              <el-form-item label="运动员" prop="playerId">
                <div style="display: flex;justify-content: space-between;">
                  <el-select v-model="form.playerId" filterable remote reserve-keyword style="width: 80%;"
                    @change="playerChange" placeholder="输入运动员姓名以查找" :remote-method="remoteMethod" :loading="loading">
                    <el-option v-for="item in playerOptions" :key="item.playerId" :label="item.name"
                      :value="item.playerId">
                      {{item.name +' / 生日:'+item.birthdayInfo+' / 教练:'+item.coachInfo+' / 项目:'+item.sportInfo}}
                    </el-option>
                  </el-select>
                  <el-button @click="selectModal=true" type="primary" icon="el-icon-arrow-up">高级</el-button>
                </div>
                <div v-if="currentPlayer.name">
                  {{currentPlayer.name +' / 生日:'+currentPlayer.birthdayInfo+' / 教练:'}}
                  <el-radio-group size="mini" v-model="form.coachId">
                    <el-radio-button v-for="item,index in currentPlayer.coachIds.split(',')" :label="item">
                      {{dict_coach[item]}}</el-radio-button>
                  </el-radio-group>
                  {{' / 项目:'+currentPlayer.sportInfo}}
                </div>
              </el-form-item>
              <el-form-item label="数据采集日期" prop="createDate">
                <el-date-picker v-model="form.createDate" type="datetime" placeholder="选择日期时间" align="left"
                  style="width: 100%;" :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="测试项目" prop="templateId">
                <el-select v-model="form.templateId" collapse-tags style="width: 100%;"
                  :disabled="Object.keys(package2metas).length!=0" filterable clearable placeholder="请选择">
                  <el-option :label="item" :value="key" v-for="(item,key,index) in dict_template" :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="usageId==3||usageId==4" label="场景">
                <el-select v-model="form.scenarioId" collapse-tags style="width: 100%;"
                  :disabled="Object.keys(package2metas).length!=0" filterable clearable placeholder="请选择">
                  <el-option :label="item" :value="key" v-for="(item,key,index) in dict_scenario" :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-show="packageShow" label="尿常规">
                <el-button @click="machineRead" size="small" type="primary">机读(立即)</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="success" size="small" icon="el-icon-setting" @click="submitEnter"
                  :disabled="Object.keys(package2metas).length!=0" style="margin: 0 10px;">
                  开始录入</el-button>
                <vxe-button @click="tableClear" status="warning" icon="el-icon-refresh-right"> 清空</vxe-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <div v-if="Object.keys(package2metas).length!=0" class="table">
          <div class="name">{{dict_player[form.playerId]}}</div>
          <table v-for="(value,key,index) in package2metas" :key="index" border="1" width="100%">
            <tr v-show="value.length!=0" height="50"
              style="background-color: #33cc99;color: #FFFFFF;font-weight: bold;">
              <td colspan="2">{{dict_package[key]}}</td>
            </tr>
            <tr class="meta" v-for="item,i in value" :key="i">
              <td width="50%">{{item.metaName}}(单位:{{item.unitName}})</td>
              <td v-if="!dict_character2num[item.metaId]">
                <el-popover placement="top-start" title="提示" width="200" trigger="click" :disabled="item.tip==''"
                  :content="item.tip">
                  <el-input :disabled="item.algo==1||item.disabled||readonly"
                    v-model.trim="item.valueDisplay=='-1'?'':item.valueDisplay" @input="inputChange(item)"
                    @blur="inputBlur(item)" slot="reference" :class="item.validate == 1?'validate-border':''">
                  </el-input>
                </el-popover>
              </td>
              <td v-else>
                <el-select v-model="item.valueDisplay" filterable allow-create size="small" placeholder="" clearable
                  style="width: 100%;" @change="inputChange(item)" :class="item.validate == 1?'validate-border':''"
                  :disabled="item.algo==1||item.disabled||readonly" default-first-option>
                  <el-option v-for="(value,key,index) in dict_character2num[item.metaId]" :key="index" :label="key"
                    :value="value">
                  </el-option>
                </el-select>
              </td>
            </tr>
          </table>
          <div class="name" v-if="!readonly">
            <el-button @click="save" type="primary" size="small" icon="iconfont icon-save"></el-button>
          </div>
        </div>
      </div>
    </div>
    <vxe-modal v-model="selectModal" title="高级查找" height="620" show-zoom resize width="700" show-footer>
      <template #default>
        <el-row type="flex">
          <el-col :span="4"></el-col>
          <el-col :span="16">
            <el-form ref="selectForm" :model="selectForm" label-width="80px" inline-message>
              <el-form-item label="运动项目">
                <el-select @change="sportChange" v-model="selectForm.sportId" collapse-tags filterable clearable
                  placeholder="请选择" style="width: 80%;">
                  <el-option :label="item" :value="key" v-for="(item,key,index) in sportData" :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="教练">
                <el-select @change="coachChange" v-model="selectForm.coachId" collapse-tags filterable clearable
                  placeholder="请选择" style="width: 80%;">
                  <el-option :label="item" :value="key" v-for="(item,key,index) in coachData" :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>
        <vxe-toolbar>
          <template #buttons>
            <vxe-input style="float: right;" v-model.trim.lazy="filterName" type="search" placeholder="快捷检索"
              @keyup="searchEvent"></vxe-input>
          </template>
        </vxe-toolbar>
        <vxe-table resizable ref="XTable" border max-height="300" stripe highlight-hover-row highlight-current-row
          resizable :loading="loading" :data="dataList" @sort-change="sortChange" :export-config="{}">
          <vxe-table-column field="name" title="姓名" sortable></vxe-table-column>
          <vxe-table-column field="birthday" title="出生日期" sortable></vxe-table-column>
          <vxe-table-column field="gender" title="性别" sortable></vxe-table-column>
          <vxe-table-column field="coach" title="教练" sortable></vxe-table-column>
          <vxe-table-column field="sport" title="运动项目" sortable></vxe-table-column>
        </vxe-table>
        <vxe-pager :loading="loading" :current-page="page.currentPage" :page-size="page.pageSize"
          :total="page.totalResult" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
          @page-change="handlePageChange">
        </vxe-pager>
      </template>
      <template #footer>
        <el-button @click="selectAction" type="primary" icon="el-icon-s-promotion" size="mini">选好了</el-button>
        <el-button @click="selectModal=false" size="mini"> 取消</el-button>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
  import {
    pcm4coach,
    currentRolePlayer,
    sport_by_org,
    template_allByUsageId
  } from '@/api/dict.js'
  import {
    allByName,
    tableHeader,
    template_package,
    checkAvailableOfAInput,
    insertComplex,
    player_advance,
    playerInfoByPlayerId4inputCommonData,
    meta_scenario
  } from '@/api/meta.js'
  export default {
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }, {
            text: '一月前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', date);
            }
          }, ]
        },
        usageId: this.$route.meta.usageId,
        dict_usage: this.$store.state.user.dict_usage,
        dict_player: {},
        dict_sport: {},
        dict_coach: {},
        dict_template: {},
        dict_package: {},
        dict_scenario: {},
        sportData: {},
        coachData: {},
        playerData: [],
        form: {
          playerId: '',
          createDate: new Date(),
          templateId: '',
          coachId: '',
          scenarioId: '',
        },
        playerOptions: [],
        currentPlayer: {},
        rules: {
          playerId: [{
            required: true,
            message: '这是必选项',
          }, ],
          createDate: [{
            required: true,
            message: '这是必选项',
          }, ],
          templateId: [{
            required: true,
            message: '这是必选项',
          }, ],
        },
        tableHeader: {},
        package2metas: {},
        validate: true,
        readonly: false,
        selectModal: false,
        selectForm: {
          sportId: '',
          coachId: '',
        },
        page: {
          currentPage: 1,
          pageSize: 5,
          totalResult: 0
        },
        defaultDataList: [],
        dataList: [],
        loading: false,
        filterName: '',
        searchProps: [],
        dict_character2num: {
            "178": {"-": "0", "+-": "15", "+1": "70", "+2": "125", "+3": "500"},
            "172": {"-": "0", "+-": "5", "+1": "15", "+2": "40", "+3": "100"},
            "177": {"-": "0.04", "+": "0.05"},
            "169": {"Normal": "1.9", "+1": "6.5", "+2": "10", "+3": "20"},
            "171": {"-": "0.4", "+1": "0.7", "+2": "1.9", "+3": "5"},
            "176": {"-": "29", "+-": "60", "+1": "80", "+2": "200", "+3": "500", "+4": "1000"},
            "170": {"-": "0", "+-": "100", "+1": "250", "+2": "500", "+3": "1000", "+4": "1500"},
            "173": {
                "1.005": "1.005",
                "1.010": "1.010",
                "1.015": "1.015",
                "1.020": "1.020",
                "1.025": "1.025",
                "1.030": "1.030"
            },
            "174": {"-": "0", "+-": "10", "+1": "25", "+2": "80", "+3": "200", "+4": "900"},
            "175": {
                "5": "5",
                "5.5": "5.5",
                "6": "6",
                "6.5": "6.5",
                "7": "7",
                "7.5": "7.5",
                "8": "8",
                "8.5": "8.5",
                "9": "9",
                "9.5": "9.5"
            }
        },
        dict_str2num: {
          "WBC": "178",
          "KET": "172",
          "NIT": "177",
          "URO": "169",
          "BIL": "171",
          "PRO": "176",
          "GLU": "170",
          "SG": "173",
          "BLD": "174",
          "pH": "175",
          "*WBC": "178",
          "*KET": "172",
          "*NIT": "177",
          "*URO": "169",
          "*BIL": "171",
          "*PRO": "176",
          "*GLU": "170",
          "*SG": "173",
          "*BLD": "174",
          "*pH": "175"
        },
        socketHost: 'ws://127.0.0.1:12123',
        socket: null,
        currentMetaArr: [],
      }
    },
    computed: {
      packageShow(){
        let name = '尿常规'
        let templateName = this.dict_template[this.form.templateId]
        if(templateName && templateName.indexOf(name) > -1){
          return true
        }else{
          return false
        }
      }
    },
    created() {
      this.init_dict()
      let that = this
      this.socket = new WebSocket(this.socketHost)
      this.socket.onmessage = function(msg) {
        that.sourceHello(msg.data)
      }
      // 打开socket后，发送初始化机器和服务之间的通信请求
      this.socket.onopen = function() {
        console.log("链接已建立,可以通信")
      }
      this.socket.onerror = function() {
        console.log("socket链接未正常建立，请检查服务是否启动，尿检仪与电脑是否正常链接")
      }
    },
    mounted() {

    },
    methods: {
      machineRead() {
        this.currentMetaArr = []
        let name = '尿常规'
        for(let key in this.package2metas){
          let packageName = this.dict_package[key]
          if(packageName.indexOf(name) > -1){
            this.currentMetaArr = this.package2metas[key]
          }
        }
        // 首先尝试建立通信
        if (this.socket.readyState == 3) {
          this.socket = new WebSocket(this.socketHost);
        }
        if (this.socket.readyState == 1) {
          this.socket.send("read");
        }
      },
      sourceHello(datas) {
        var data = datas.substr(0, datas.length - 1).split(',');
        var regPos = /^\d+(\.\d+)?$/; //非负浮点数
        var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
        var firstFilterArr = {}
        for (var key in data) {
          if (data[key].split(' ') != [])
            firstFilterArr[key] = data[key].split(' ');
          for (var i = 0; i < firstFilterArr[key].length; i++) {
            if (firstFilterArr[key][i] == '' || firstFilterArr[key][i] == null || typeof(firstFilterArr[key][i]) ==
              undefined) {
              firstFilterArr[key].splice(i, 1);
              i = i - 1;
            }
          }
        }
        var secondFilterArr = {}
        for (var key in firstFilterArr) {
          // console.log(firstFilterArr[key].length)
          if (firstFilterArr[key].length == 3) {
            var text2Id = this.dict_str2num[firstFilterArr[key][0]]
            if (text2Id) {
              secondFilterArr[text2Id] = {}
              secondFilterArr[text2Id]["subject"] = firstFilterArr[key][1]
              secondFilterArr[text2Id]["object"] = firstFilterArr[key][2]
              secondFilterArr[text2Id]["characterNum"] = this.dict_character2num[this.dict_str2num[firstFilterArr[key][0]]][
                firstFilterArr[key][1]
              ]
            }
          } else if (firstFilterArr[key].length == 2) {
            var text2Id = this.dict_str2num[firstFilterArr[key][0]]
            if (text2Id) {
              secondFilterArr[text2Id] = {}
              if (regPos.test(firstFilterArr[key][1]) || regNeg.test(firstFilterArr[key][1])) {
                secondFilterArr[text2Id]["subject"] = ''
                secondFilterArr[text2Id]["object"] = firstFilterArr[key][1]
                secondFilterArr[text2Id]["characterNum"] = firstFilterArr[key][1]
              } else {
                secondFilterArr[text2Id]["subject"] = firstFilterArr[key][1]
                secondFilterArr[text2Id]["object"] = ''
                secondFilterArr[text2Id]["characterNum"] = this.dict_character2num[this.dict_str2num[firstFilterArr[key][0]]][
                  firstFilterArr[key][1]
                ]
              }

            }
          }
        }
        for (var i = 0; i < secondFilterArr.length; i++) {
          // MR : machineRead 在跟上各种指标的ID ,构成需要些的input的Id
          // $("#MR" + secondFilterArr[i]).val(secondFilterArr[text2Id]["characterNum"]);
          this.currentMetaArr.forEach(item=>{
            if(item.metaId == secondFilterArr[i]){
              item.valueDisplay = secondFilterArr[text2Id]["characterNum"]
            }
          })
        }
        for (var generKey in secondFilterArr) {
          // $("#MR" + generKey).val(secondFilterArr[generKey]["characterNum"]);
          this.currentMetaArr.forEach(item=>{
            if(item.metaId == generKey){
              item.valueDisplay = secondFilterArr[generKey]["characterNum"]
            }
          })
        }
        this.$forceUpdate()
      },
      selectAction() {
        let current = this.$refs.XTable.getCurrentRecord()
        if (current) {
          playerInfoByPlayerId4inputCommonData({
            playerId: current.playerId
          }).then(res => {
            if (res.code === 200) {
              this.playerOptions.push(res.data)
              this.currentPlayer = res.data
              this.form.playerId = res.data.playerId
              this.form.coachId = res.data.coachIds.split(',')[0]
              this.selectModal = false
            } else {
              this.$message.error(res.message)
            }
          })
        }
      },
      sportChange(val) {
        this.selectForm.coachId = ''
        this.coachData = {}
        let data = {
          sportId: this.selectForm.sportId || val,
          createDate: this.$moment(this.form.createDate).format('YYYY-MM-DD') + " 00:00:00",
        }
        pcm4coach(data).then(res => {
          this.coachData = res
        })
      },
      coachChange(val) {
        if (this.selectForm.sportId) {
          let data = {
            empId: this.selectForm.coachId || val,
            sportId: this.selectForm.sportId,
            isImportant: 3
          }
          player_advance(data).then(res => {
            if (res.code === 200) {
              res.data.forEach(item => {
                item.gender = item.genderId == 1 ? '男' : '女'
                item.coach = this.dict_coach[item.coachId]
                item.sport = this.dict_sport[item.sportId]
                item.birthday = this.$moment(item.birthday).format('YYYY-MM-DD')
              })
              this.searchProps = Object.keys(res.data[0])
              this.defaultDataList = res.data
            } else {
              this.defaultDataList = []
            }
          }).then(() => {
            this.findList()
          })
        }
      },
      save() {
        this.validate = true
        for (let key in this.package2metas) {
          for (var i = 0; i < this.package2metas[key].length; i++) {
            if (this.package2metas[key][i].validate == 1) {
              this.validate = false
              break
            }
          }
        }
        if (!this.validate) {
          this.$message.warning('有数据格式不正确，请检查！')
          return
        } else {
          for (let key in this.package2metas) {
            this.package2metas[key].forEach(item => {
              if (item.algo == 1) {
                item.valueDisplay = "-1"
              }
              if (item.valueDisplay && !item.disabled) {
                let data = {
                  valueDisplay: item.valueDisplay,
                  templateId: this.form.templateId,
                  playerId: this.form.playerId,
                  createDate: this.$moment(this.form.createDate).format('YYYY-MM-DD') + " 00:00:00",
                  empId: this.form.coachId,
                  metaId: item.metaId,
                  scenarioId: item.scenarioId,
                  createTime: this.$moment(this.form.createDate).format('YYYY-MM-DD HH:mm:ss'),
                  usageId: this.usageId,
                  mapId: item.mapId
                }
                insertComplex(data).then(res => {
                  if (res.code === 200) {
                    this.readonly = true
                    this.$message.success('数据保存成功!')
                  } else {
                    this.$message.error(res.message)
                  }
                })
              }
            })
          }
        }
      },
      inputBlur(item) {
        let data = {
          usageId: this.usageId,
          templateId: this.form.templateId,
          scenarioId: item.scenarioId,
          metaId: item.metaId,
          playerId: this.form.playerId,
          mapId: item.mapId,
          createDate: this.$moment(this.form.createDate).format('YYYY-MM-DD') + " 00:00:00"
        }
        checkAvailableOfAInput(data).then(res => {
          if (res.data.data == 0) {
            item.valueDisplay = ''
            item.disabled = true
          } else {
            item.disabled = false
          }
        })
      },
      inputChange(item) {
        let time_reg = new RegExp('^([0-9]{1,2}:)?([0-9]{1,2}\')?([0-9]{1,2}\")?([0-9]{1,3})?$') // 时间的正则判定式
        let float_reg = new RegExp("^-?\\d*\\.\\d{1,4}$|^-?\\d+$"); // 浮点的正则判定式
        let optionArr = [1, 2, 3, 4, 5]; // 选项的正则判定式
        if (item.valueDisplay != '') {
          if (item.converterId == 4) {
            if (time_reg.test(item.valueDisplay)) {
              item.validate = 0
            } else {
              item.validate = 1
            }
          } else if (item.converterId == 5) {
            if (optionArr.indexOf(parseInt(item.valueDisplay)) > -1) {
              item.validate = 0
            } else {
              item.validate = 1
            }
          } else if (item.converterId != 4 && item.converterId != 5) {
            if (float_reg.test(item.valueDisplay)) {
              item.validate = 0
            } else {
              item.validate = 1
            }
          }
        } else {
          item.validate = 0
        }
      },
      tableClear() {
        this.tableHeader = {}
        this.package2metas = {}
        this.form.playerId = ''
        this.form.coachId = ''
        this.currentPlayer = {}
      },
      submitEnter() {
        this.readonly = false
        this.$refs.form.validate((valid) => {
          if (valid) {
            template_package(this.form.templateId).then(res => {
              if (res.code === 200) {
                res.data.forEach(item => {
                  this.dict_package[item.packageId] = item.shortName
                })
              } else {
                this.$message.error(res.message)
              }
            }).then(() => {
              let data = {
                templateId: this.form.templateId,
                scenarioId: this.usageId == 1 || this.usageId == 2 ? 0 : this.form.scenarioId,
                usageId: this.usageId,
                packageIdsStr: '',
              }
              tableHeader(data).then(res => {
                if (res.code === 200) {
                  if (res.data.mspObj.length != 0) {
                    this.tableHeader = res.data
                    this.package2metas = res.data.package2metas
                    for (let key in this.package2metas) {
                      this.package2metas[key].forEach(item => {
                        item.validate = 0
                        item.disabled = false
                      })
                    }
                  } else {
                    this.package2metas = {}
                    this.$message.warning('无可用数据！')
                  }
                } else {
                  this.$message.error(res.message)
                }
              })
            })
          } else {
            return false;
          }
        })
      },
      playerChange(val) {
        this.playerOptions.forEach(item => {
          if (item.playerId == val) {
            this.form.coachId = item.coachIds.split(',')[0]
            this.currentPlayer = item
          }
        })
      },
      // 搜索名字
      remoteMethod(name) {
        let data = {
          name: `%${name}%`,
          createDate: this.$moment(this.form.createDate).format('YYYY-MM-DD')
        }
        allByName(data).then(res => {
          if (res.code === 200) {
            this.playerOptions = res.data
          } else {
            this.$message.warning('没有找到')
          }
        })
      },
      init_dict() {
        return new Promise((resolve, reject) => {
          sport_by_org().then(res => {
            this.dict_sport = res
            this.sportData = res
          })
          pcm4coach().then(res => {
            this.dict_coach = res
            this.coachData = res
          })
          meta_scenario().then(res => {
            res.data.forEach(item => {
              this.dict_scenario[item.scenarioId] = item.name
            })
            if (this.usageId == 4) {
              this.dict_scenario = {
                6: '晨空腹'
              }
            }
            this.form.scenarioId = 6 + ''
          })
          template_allByUsageId({
            usageId: this.usageId
          }).then(res => {
            this.dict_template = res
          })
          currentRolePlayer().then(res => {
            this.dict_player = res
            resolve()
          })
        })
      },
      searchEvent() {
        const filterName = this.$XEUtils.toValueString(this.filterName).trim().toLowerCase()
        if (filterName) {
          const filterRE = new RegExp(filterName, 'gi')
          const searchProps = this.searchProps
          const rest = this.defaultDataList.filter(item => searchProps.some(key => this.$XEUtils.toValueString(item[
            key]).toLowerCase().indexOf(filterName) > -1))
          this.dataList = rest.map(row => {
            const item = Object.assign({}, row)
            searchProps.forEach(key => {
              item[key] = this.$XEUtils.toValueString(item[key]).replace(filterRE, match => match)
            })
            return item
          })
        } else {
          this.dataList = this.defaultDataList
          this.findList()
        }
      },
      handlePageChange({
        currentPage,
        pageSize
      }) {
        this.page.currentPage = currentPage
        this.page.pageSize = pageSize
        this.findList()
      },
      sortChange() {
        this.page.pageSize = this.defaultDataList.length
        this.findList()
      },
      findList() {
        this.loading = true
        setTimeout(() => {
          if (this.insertSuccess) {
            this.page.totalResult = this.defaultDataList.length
            this.page.currentPage = Math.ceil(this.page.totalResult / this.page.pageSize)
            this.dataList = this.defaultDataList.slice((this.page.currentPage - 1) * this.page
              .pageSize, this.page.currentPage * this.page.pageSize)
            this.$refs.XTable.setCurrentRow(this.dataList[this.dataList.length - 1])
            this.insertSuccess = false
          } else {
            this.page.totalResult = this.defaultDataList.length
            this.dataList = this.defaultDataList.slice((this.page.currentPage - 1) * this.page
              .pageSize, this.page.currentPage * this.page.pageSize)
          }
          this.loading = false
        }, 300)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #FFFFFF;
    padding: 20px;

    .table {
      background-color: #f8f8f8;

      .name {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border: 1px solid #eeeeee;
        text-align: center;
      }

      .meta {
        color: #000000;

        &:hover {
          background-color: #e2eee6;
        }

        .validate-border {
          border: 1px solid red;
          border-radius: 5px;
        }
      }

      table {
        border-collapse: collapse;
        border-color: #eeeeee;

        tr td {
          padding: 5px;
        }
      }
    }
  }
</style>
